<script setup>
  import { http } from '@/utils/http.js'

  // 导入工具方法解构 State 数据
  import { storeToRefs } from 'pinia'
  // 导入定义好的 Store
  import { useCounterStore } from '@/stores/counter.js'
  // 创建 Store 实例
  const counterStore = useCounterStore()
  // 像普通过 reactive 包装数据一样来访问
  console.log(counterStore.count)
  // getters 可以可采用相同的方式来访问
  console.log(counterStore.double)

  // 直接解构是错误的用法
  // const { count, double } = counterStore
  // 正确的解构方法
  const { count, double } = storeToRefs(counterStore)

  let _count = 0
  // 更新 state
  function increment() {
    // 直接等号赋值
    // counterStore.count++
    // 调用 $patch 方法
    counterStore.$patch({
      count: ++_count,
    })
  }
  // 更新 state
  function decrement() {
    // 直接等号赋值
    // counterStore.count--
    // 调用 $patch 方法
    counterStore.$patch({
      count: --_count,
    })
  }

  async function onButtonClick() {
    // 1. 普通用法
    const result = await http.request({
      url: '/echo',
      method: 'GET',
      header: {
        customHeader: '22222222'
      },
      // 局部配置自定义参数
      custom: {
		    abc: 123,
      },
    })

	// 全局使用方法
	uni.utils.toast("测试")

    console.log(result)
  }
</script>
<template>
  <view class="content">
    <button @click="onButtonClick" type="primary">luch-request 测试</button>
    <view class="counter">
      <button @click="decrement" class="button" type="primary">-</button>
      <input class="input" :value="counterStore.count" type="text" />
      <button @click="increment" class="button" type="primary">+</button>
    </view>
    <view class="state">
        <text class="text">count: {{ count }}</text>
        <text class="text">double: {{ double }}</text>
    </view>
  </view>
</template>

<style lang="scss">
  .counter {
    display: flex;
    margin-top: 30rpx;
  }

  .input {
    flex: 1;
    height: 96rpx;
    text-align: center;
    border: 2rpx solid #eee;
    box-sizing: border-box;
  }

  .button {
    width: 100rpx;
    margin: 0;

    &:first-child {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    &:last-child {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }

  .state{
    display: flex;
    flex-direction: column;
  }
</style>
